<?php

function genererHeader($title) {
	echo <<< FIN
	<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<meta name="description" content="">
	
			<title>$title</title>
	
			<!-- Bootstrap core CSS -->
			
			<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"  />
			<link href="css/theme2.css" type="text/css" rel="stylesheet"/>
			<!-- Bootstrap theme -->
			<link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet"/>
			<link href="css/slider.css" type="text/css" rel="stylesheet"/>
			<link href="css/fractionslider.css" type="text/css" rel="stylesheet"/>
			<link href="css/business-casual.css" type="text/css" rel="stylesheet"/>
			
		</head>
		<body>
FIN;
}

function genererFormConnexion() {
	echo <<< FIN
	<div id="topMenu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<!-- <div class="navbar-collapse collapse"> -->
					<div id="logo">
						<img src="img/logo.png" alt="testImage"/>
					</div>
					<div id="identification">
						<form action="index.php" method="POST" class="navbar-form navbar-right" role="form">
							<div class="form-group">
								<input name="email" type="text" placeholder="E-mail" class="form-control">
							</div>
							<div class="form-group">
								<input name="passwd" type="password" placeholder="Mot de Passe" class="form-control">
							</div>
							<button type="submit" class="btn btn-primary">
								Connexion
							</button>
							<br />
							<input type="checkbox" value="autoConnect" />
							<span class="autoco"> Connexion automatique</span>
							<a class="mdpoublie" href="#">Mot de passe oublié ?</a>
						</form>
					</div>
					<!--</div><!--/.navbar-collapse -->
				</div>
			</div>
FIN;
}

function genererMenu() {
	echo <<< FIN
	<div id="menuLien">
				<nav class="navbar navbar-default" role="navigation">
					<div class="container">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="index.html">Bienvenue</a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse navbar-ex1-collapse">
							<ul class="nav navbar-nav">
								<li>
									<a href="#menu1" rel="" id="anchor1" class="anchorLink">Menu 1</a>
								</li>
								<li>
									<a href="#menu2" rel="" id="anchor2" class="anchorLink">Menu 2</a>
								</li>
								<li>
									<a href="#menu3" rel="" id="anchor3" class="anchorLink">Menu 3</a>
								</li>
								<li>
									<a href="#menu4" rel="" id="anchor4" class="anchorLink">Menu 4</a>
								</li>
								<li>
									<a href="#contact" rel="" id="anchor5" class="anchorLink">Contact</a>
								</li>
							</ul>
						</div>
						<!-- /.navbar-collapse -->
					</div>
					<!-- /.container -->
				</nav>
			</div>
		</div><!-- div bar fixed top-->
FIN;
}

function genererContenu() {
	echo <<< FIN
	<div class="slider-wrapper">
			<div class="responsive-container">
				<div class="slider">
					<div class="slide">
						<img 	src="img/voila.jpg"
						width="2000" height="200"
						data-position="0,-200" data-in="left" data-delay="20" data-out="right">

						<p 		class=" sliderP sliderFont"
						data-position="30,30" data-in="topRight" data-delay="5" data-step="1" data-out="bottom">
							I Challenge
						</p>

						<p 		class="sliderP sliderFont"
						data-position="60,800" data-in="bottom" data-step="2" data-delay="5">
							You Win !
						</p>

					</div>
					<div class="slide" data-in="slideLeft">
						<img 	src="img/main.JPG" width="2000" height="200"
						data-position="0,-200" data-in="fade" data-delay="0" data-out="right">

						<p 		class="sliderP sliderFontBlue"
						data-position="30,30" data-in="left" data-step="2" data-delay="100">
							Relation
						</p>
						<p 		class="sliderP sliderFontBlue"
						data-position="80,800" data-in="top" data-step="2" data-delay="500">
							Of Trust
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="row accroche">
			<div class="col-lg-4">
				<img class="img-circle rondAccroche" src="img/circle.png" alt="Generic placeholder image">
				<h2>Heading</h2>
				<p>
					Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
				</p>
			</div><!-- /.col-lg-4 -->
			<div class="col-lg-4">
				<img class="img-circle rondAccroche" src="img/circle.png" alt="Generic placeholder image">
				<h2>Heading</h2>
				<p>
					Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
				</p>
			</div><!-- /.col-lg-4 -->
			<div class="col-lg-4">
				<img class="img-circle rondAccroche" src="img/circle.png" alt="Generic placeholder image">
				<h2>Heading</h2>
				<p>
					Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
				</p>
			</div><!-- /.col-lg-4 -->
		</div><!-- /.row -->

		<div class="pochetteContainerUn">
			<span class="myAnchor" name="myAnchor" id="menu1"></span>
			<div class="pochette">
				<div class="row featurette espacementPochette">
					<div class="col-md-7">
						<h2 class="featurette-heading" >First featurette heading.<span class="text-muted">It'll blow your mind.</span></h2>
						<p class="lead">
							Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
						</p>
					</div>
					<div class="col-md-5">
						<!-- <img class="featurette-image img-responsive" data-src="img/marketing.png" alt="Generic placeholder image"> -->
						<img class="featurette-image img-responsive" src="img/marketing.png" alt="coucou">
					</div>
				</div>
				<span class="myAnchor" name="myAnchor" id="menu2"></span>
			</div>
		</div>

		<div class="pochetteContainerDeux">
			<div class="pochette">
				<div class="row featurette espacementPochettePetit">
					<div class="col-md-5">
						<!-- <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> -->
						<img class="featurette-image img-responsive" src="img/marketing.png" alt="coucou">
					</div>
					<div class="col-md-7">
						<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
						<p class="lead" style="color:white;">
							Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
						</p>
					</div>
				</div>
				<span class="myAnchor" name="myAnchor" id="menu3"></span>
			</div>
		</div>

		<div class="pochetteContainerTrois">
			<div class="pochette">
				<div class="row featurette espacementPochette">
					<div class="col-md-7">
						<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
						<p class="lead" >
							Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
						</p>
					</div>
					<div class="col-md-5">
						<!-- <img class="featurette-image img-responsive" data-src="img/marketing.png" alt="Generic placeholder image"> -->
						<img class="featurette-image img-responsive" src="img/marketing.png" alt="coucou">
					</div>
				</div>
				<span class="myAnchor" name="myAnchor" id="menu4"></span>
			</div>
		</div>

		<div class="pochetteContainerQuatre">
			<div class="pochette">
				<div class="row featurette espacementPochetteQuatre">
					<div class="col-md-5">
						<!-- <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> -->
						<img class="featurette-image img-responsive" src="img/marketing.png" alt="coucou">
					</div>
					<div class="col-md-7">
						<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
						<p class="lead">
							Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
						</p>
					</div>
				</div>
				<span class="myAnchor" name="myAnchor" id="contact"></span>
			</div>
		</div>
FIN;
}

function genererFormContact() {
	echo <<< FIN
	<div class="containerContact">
			<div class="contactForm">
				<div class="row">
					<div class="col-md-3">
						Alexis Lejeune
						<br />
						Rue des palais 1,
						<br />
						1000 Justice
						<br />
						02/000 00 00
					</div>
					<div class="col-md-4 col-md-offset-1">
						<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d80626.9799544421!2d4.363404999999999!3d50.838699999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c486740f9fff%3A0x10099ab2f4c8030!2sBruxelles!5e0!3m2!1sfr!2s!4v1394381555668" width="300" height="300" frameborder="0" style="border:0"></iframe>
					</div>
					<div class="col-md-3 col-md-offset-1">
						<form role="form">
							<div class="form-group">
								<label for="emailContact">Adresse e-mail :</label>
								<input type="email" class="form-control" id="mail" placeholder="adresse@domaine.com">
							</div>
							<div class="form-group">
								<label for="message">Message :</label>
								<textarea class="form-control" id="message" rows="5" placeholder="Message"></textarea>
							</div>
							<button type="Envoyer" id="boutonEnv" class="btn btn-default">
								Envoyer
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>
FIN;
}

function genererFooter() {
	echo <<< FIN
	<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.fractionslider.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/verifMail.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
	</html>
FIN;
}

function genererTop($prenom) {
	echo <<< FIN
	<div id="topMenu" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-8">
					<!-- <div class="navbar-collapse collapse"> -->
					<div id="logo">
						<img src="img/logo.png" alt="testImage"/>
					</div>
					<div id="identification">
						<form class="navbar-form navbar-right" role="form">
							<p class="autoco">
								Bonjour $prenom , <a href="modules/deconnexion.php">Déconnexion</a>
							</p>
						</form>
					</div>
					<!--</div><!--/.navbar-collapse -->
				</div>
			</div>
			<div id="menuLien">
				<nav class="navbar navbar-default" role="navigation">
					<div class="container">
						<div class="navbar-header"></div>
					</div>
				</nav>
			</div>
		</div>
FIN;
}

function afficherMembres() {

	if (($reponse = getUtilisateurs()) != false) {
		echo "<table>\n";
		foreach ($reponse as $ligne => $row) {
			$id = $row['id'];
			$email = $row['email'];
			$nom = $row['nom'];
			$prenom = $row['prenom'];
			$telephone = $row['telephone'];

			echo "<tr>\n";
			echo "<td>\n";
			echo "<table>\n";
			echo "<td class=\"tdInside\">\n";
			echo "<strong>ID</strong> : " . htmlspecialchars($id) . "\n";
			echo "<br>\n";
			echo "<strong>E-mail</strong> : " . htmlspecialchars($email) . "\n ";
			echo "<br>\n";
			echo "<strong>Nom</strong> : " . htmlspecialchars($nom) . "\n ";
			echo "<br>\n";
			echo "<strong>Prenom</strong> : " . htmlspecialchars($prenom) . " \n";
			echo "<br>\n";
			echo "<strong>Telephone</strong> : " . htmlspecialchars($telephone) . " \n";
			echo "<br>\n";
			echo "</td>\n";
			echo "</table>\n";
			echo "</td>\n";
			echo "</tr>\n";

		}
		echo "</table>\n";
	}

}

function genererPanelAdmin() {
	echo <<< FIN
		<div class="account">
			<div class="client" style="background-color:white;">
				<table class="clientTable">
					<tr>
						<td style="padding-left: 10px;padding-top: 10px;" valign="top"><a href="#">Client 1</a>
						<br />
						<a href="#">Client 2</a></td>
					</tr>
				</table>
				<div class="clientAction">
					<a data-toggle="modal" href="#ajoutClient"><img src="img/add-icon.png"/></a>
					<a data-toggle="modal" href="#suppressionClient"><img src="img/remove-icon.png"/></a>
					<a data-toggle="modal" href="#modificationClient"><img src="img/edit-icon.png"/></a>
				</div>
			</div>
			
			<div class="clientData" style="background-color: white;">
			
				<ul class="nav nav-tabs" id="myTab">
					<li class="active"><a href="#home" data-toggle="tab">Affaires en Cours</a></li>
					<li><a href="#profil" data-toggle="tab">Modification</a></li>
					<li><a href="#ajout" data-toggle="tab">Ajout</a></li>
				</ul>

				<div id='content' class="tab-content">
					<div class="tab-pane active" id="home">
						<div class="modal fade" id="modificationClient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 150px;">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
											&times;
										</button>
										<h4 class="modal-title" id="myModalLabel">Modifier un client</h4>
									</div>
									<div class="modal-body">
										<form>
											Nom :
											<select name="nom">
												<option value="client1">Client 1</option>
												<option value="client2">Client 2</option>
											</select>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">
											Annuler
										</button>
										<button type="button" class="btn btn-primary">
											Sauver
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="tab-pane" id="profile">
						<div class="modal fade" id="suppressionClient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 150px;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										&times;
									</button>
									<h4 class="modal-title" id="myModalLabel">Supprimer un client</h4>
								</div>
								<div class="modal-body">
									<form>
										Nom :
										<select name="nom">
											<option value="client1">Client 1</option>
											<option value="client2">Client 2</option>
										</select>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">
										Annuler
									</button>
									<button type="button" class="btn btn-primary">
										Supprimer
									</button>
								</div>
							</div>
						</div>
					</div>
					</div>
					
					<div class="tab-pane" id="ajout">
						<div class="modal fade" id="ajoutClient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 150px;">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
											&times;
										</button>
										<h4 class="modal-title" id="myModalLabel">Ajouter un client</h4>
									</div>
									<div class="modal-body">
										<form>
											Nom :
											<input class="form-control" placeholder="Nom" type="text" name="nom" />
											<br />
											<input class="form-control" placeholder="Prénom" type="text" name="prenom" />
											<br />
											Adresse e-mail :
											<input type="text" class="form-control" placeholder="E-Mail" name="mail "/>
											<br />
											Numéro de téléphone :
											<input text="text" class="form-control" placeholder="Téléphone" />
											<input type="submit" value="Enregistrer">
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">
											Fermer
										</button>
										<button type="button" class="btn btn-primary">
											Sauver
										</button>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div><!--End Account -->
FIN;
}

function afficherTableMembres() {
	$result = getUtilisateurs();
	echo "<table>";
		foreach($result as $membre) {
			afficherLigneMembre($membre);
		}
	echo "</table>";
}

function afficherLigneMembre($membre) {
	echo <<< FIN
	<tr>
		<td>${membre['nom']} </td>
		<td>${membre['prenom']}</td>
		<td>${membre['email']}</td>
		<td>${membre['telephone']}</td>
	</tr>
FIN;
}
?>